<template>
    <n-card>
        <n-collapse>
            <n-collapse-item title="搜索">
                <n-form>
                    <n-grid :cols="4" :x-gap="20">
                        <n-form-item-gi label="客户名称">
                            <n-input
                                v-model:value="reservationSearch.customerName"
                                placeholder="输入客户名称"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="客户电话">
                            <n-input
                                v-model:value="reservationSearch.customerPhone"
                                placeholder="输入客户电话"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="公司名称">
                            <n-input
                                v-model:value="reservationSearch.companyName"
                                placeholder="输入公司名称"
                            />
                        </n-form-item-gi>
                        <n-form-item-gi label="预约日期">
                            <n-date-picker
                                v-model:value="reservationSearch.reserveDate"
                                type="date"
                                class="w-full"
                            />
                        </n-form-item-gi>
                    </n-grid>
                </n-form>
                <div class="w-full flex justify-end gap-20px">
                    <n-button :focusable="false" @click="handleReset">
                        <template #icon>
                            <n-icon :component="Refresh" />
                        </template>
                        重置
                    </n-button>
                    <n-button
                        type="primary"
                        ghost
                        :focusable="false"
                        @click="handleSubmit"
                    >
                        <template #icon>
                            <n-icon :component="Search" />
                        </template>
                        搜索
                    </n-button>
                </div>
            </n-collapse-item>
        </n-collapse>
    </n-card>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { Refresh, Search } from "@vicons/ionicons5";
import { cloneDeep } from "lodash";

interface ReservationSearch {
    customerName: string;
    customerPhone: string;
    companyName: string;
    reserveDate: number | null;
}

const emptySearchContent: ReservationSearch = {
    customerName: "",
    customerPhone: "",
    companyName: "",
    reserveDate: null,
};

const reservationSearch = reactive<ReservationSearch>({
    ...emptySearchContent,
});

const handleReset = () => {
    Object.assign(reservationSearch, cloneDeep(emptySearchContent));
};

const handleSubmit = () => {
    console.log(reservationSearch);
};
</script>

<style scoped></style>
